const path = require('path');

// 导入在内存中生成 HTML 页面的 插件
// 只要是插件，都一定要 放到 plugins 节点中去
// 这个插件的两个作用：
//  1. 自动在内存中根据指定页面生成一个内存的页面
//  2. 自动，把打包好的 main.js 追加到页面中去
var htmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    entry: path.resolve(__dirname, './src/index.js'),// 入口，表示，要使用 webpack 打包哪个文件
    output: {   // 输出文件相关的配置
        filename: 'main.js',  // 这是指定 输出的文件的名称
        path: path.resolve(__dirname, 'dist'),  // 指定 打包好的文件，输出到哪个目录中去
    },
    devServer: {},
    plugins: [
        new htmlWebpackPlugin({   //创建一个在内存中生成的html页面
            //指定模板页面 将来会根据指定的页面路径  去内存中生成一个一样的页面
            template: path.resolve(__dirname, './src/index.html'),
            //指定生成页面的名称
            filename: 'index.html'
        }),
        new VueLoaderPlugin(),
    ],
    module: {
        rules: [
            {   //配置css
                test: /\.css$/,
                use: [{loader: 'style-loader'}, {loader: 'css-loader'}],
            },
            {   //配置less
                test: /\.less$/,
                use: [{
                    loader: 'style-loader' // creates style nodes from JS strings
                }, {
                    loader: 'css-loader' // translates CSS into CommonJS
                }, {
                    loader: 'less-loader' // compiles Less to CSS
                }]
            },
            {    //配置scss
                test: /\.scss$/,
                use: [
                    "style-loader", // 将 JS 字符串生成为 style 节点
                    "css-loader", // 将 CSS 转化成 CommonJS 模块
                    "sass-loader" // 将 Sass 编译成 CSS，默认使用 Node Sass
                ]
            },
            {   //配置url
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            // limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，大于或等于给定的 limit值，
                            // 则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串
                            limit: 8192   //图片大小 大于或者等于就用
                        }
                    }
                ]
            },
            {   // 处理 字体文件的 loader
                test: /\.(ttf|eot|svg|woff|woff2)$/,
                use: 'url-loader'
            },
            {   // 配置 Babel 来转换高级的ES语法
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],

                        // npm i -D @babel/plugin-proposal-class-properties
                        // plugins: ['@babel/plugin-proposal-class-properties']

                        plugins: ['@babel/plugin-proposal-class-properties']
                    }

                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
        ],

    }
};

// new VueLoaderPlugin() 引入这个插件，必须的
// ps：注意 引入const VueLoaderPlugin = require(‘vue-loader/lib/plugin’)
// 在之前的版本中好像不需要这个插件，再看教程的时候还是跟着官方文档来 vue-loader


